<template>
    <div>
        <x-header class="myHeader"  :left-options="{backText: ''}">
            <!-- <span >密码重置</span> -->
        </x-header>
        <!-- <group>
            <x-input  v-model="account" placeholder="请输入账号"></x-input>
            <x-input  v-model="id" placeholder="请输入身份证号码"></x-input>
        </group>

        <button class="myBtn" @click="btnClick">下一步</button> -->
        <!-- <van-cell title="账号验证" class="xc-top" label="输入手机号及验证码"/> -->
        <van-steps class="xc-top" :active="xcActive">
          <van-step>账号验证</van-step>
          <van-step>设置新密码</van-step>
          <van-step>设置成功</van-step>
        </van-steps>
        <van-form v-if="xcActive==0">
            <van-field v-model="account" label="手机号码" type="text" placeholder="请输入账号" />
            <van-field v-model="captcha" label="验证码" type="text" placeholder="请输入短信验证码" use-button-slot>
              <van-button v-if="sendBtnFlag" slot="button" size="" type="primary" @click="sendSmsCaptcha">
                发送验证码
              </van-button>
              <van-button v-else disable slot="button" size="small" type="primary">
                {{showtime}}
              </van-button>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" @click="btnClick">提交</van-button>
            </div>
        </van-form>
        <van-form v-if="xcActive==1">
            <van-field v-model="pswd" label="新密码" :type="viewPwdFlag?'text':'password'" placeholder="请输入新密码">
              <template slot="right-icon">
                <i class="view-btn icon iconfont icon-biyanjing" v-if="viewPwdFlag" @click="viewPwdFlag=!viewPwdFlag"></i>
                <i class="view-btn icon iconfont icon-chakan" v-if="!viewPwdFlag" @click="viewPwdFlag=!viewPwdFlag"></i>
              </template>
            </van-field>
            <van-field v-model="pswdAg" label="新密码" :type="viewPwdFlag?'text':'password'" placeholder="请再次输入新密码"/>
            <div style="margin: 16px;">
                <van-button round block type="info" @click="btnClick1">提交</van-button>
            </div>
        </van-form>
        <msg v-if="xcActive==2" title="重置成功" :buttons="buttons" :icon="icon"></msg>
    </div>
</template>

<script>
import { XHeader, XInput, Msg, XButton} from "vux";
export default {
  name: "forgetSecret",
  components: {
    XHeader,
    XInput,
    Msg,
    XButton
  },
  data() {
    return {
      account: null,
      captcha: null,
      pswd: null,
      sendBtnFlag: true,
      showtime: "60s后重新获取",
      timeCounter: null,
      xcActive: 0,
      pswd: "",
      pswdAg: "",
      viewPwdFlag: false,
      buttons: [{
          type: 'primary',
          text: '返回登录',
          link: '/login',
          style: 'border-radius:99px; width: 10%'
      }]
    };
  },
  created() {
    this.pswd = this.$route.query.password;
  },
  methods: {
    sendSmsCaptcha() {
      if (!this.account) {
        return this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">请填写账号！</p>'
        });
      }
      //判断账号是否存在
      this.baseService.postForm(this.__ctx+"/org/login/isUserExist", {account: this.account}).then(data=>{
        if (data) {
          this.sendBtnFlag = false;
          this.countDown(60);
          //获取验证码
          let params = {};
          params["destEntry"] = this.account;
          params["messageContent"] = "anything is ok";
          params["scheduleTime"] = new Date().format("yyyy-MM-dd HH:mm:ss");
          params["validTime"] = new Date().format("yyyy-MM-dd HH:mm:ss");
          this.baseService.post(this.__ctx + "/wps/sendCaptcha", params).then(result => {
          });
        } else {
          return  this.$toast({
            type:'fail',
            message:'账号不存在',
            icon:'fail',
            // duration:200000
          })
        }
      });
      
    },
    countDownText(s) {
      this.showtime = `${s}s后重新获取`
    },
    countDown(times) {
      const self = this;
      // 时间间隔 1秒
      const interval = 1000;
      let count = 0;
      self.timeCounter = setTimeout(countDownStart, interval);
      function countDownStart() {
        if (self.timeCounter == null) {
        return false;
        }
        count++
        self.countDownText(times - count + 1);
        if (count > times) {
          clearTimeout(self.timeCounter)
          self.showtime = null;
          self.sendBtnFlag = true;
        } else {
          self.timeCounter = setTimeout(countDownStart, interval)
        }
      }
    },
    btnClick() {
      if (!this.account || !this.captcha) {
        return this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">请填写信息！</p>'
        });
      } else {
        this.baseService.postForm(this.__ctx+"/org/login/isUserExist", {account: this.account}).then(data=>{
          if (data) {
            this.xcActive = 1;
          } else {
            return  this.$toast({
              type:'fail',
              message:'账号不存在',
              icon:'fail',
              // duration:200000
            })
          }
        });
        
      }
    },
    btnClick1() {
      if (!this.pswd) {
        return this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">请填写账号！</p>'
        });
      }
      if (this.pswd != this.pswdAg) {
        return this.$vux.toast.show({
          type: "warn",
          width: "60vw",
          text: '<p style="font-size:0.5rem">密码不一致！</p>'
        });
      }
      this.baseService.postForm(this.__ctx + "/org/login/updatePassword", {"account":this.account, "captcha":this.captcha, "newPassword":this.pswd}).then(result => {
        if (result.isOk) {
          this.xcActive = 2;
        } else {
          return this.$vux.toast.show({
            type: "warn",
            width: "60vw",
            text: '<p style="font-size:0.5rem">修改密码失败，请重试！</p>'
          });
        }
      });
      
    }
  }
};
</script>

<style scoped lang="less">
.xc-top {
  margin-top: 1.2rem;
}
.van-step {
  /deep/ .van-step__title {
    font-size: 0.4rem;
  }
}

.van-cell {
  /deep/ .van-cell__label {
    width: 1rem;
  }
  /deep/ .van-button__text {
    font-size: 0.3rem;
  }
  /deep/ .van-button {
    border-radius: 0.2rem;
    height: 0.8rem;
  }
  /deep/ .van-field__control {
    font-size: 0.4rem;
    margin-right: 0.3rem;
  }
}
.submit{
  background: #dc3019;
  border-color:#dc3019;
  width:80%;
  margin:0 auto;
}

</style>
